數據綁定

在昨天的程式裡面有寫道的這一段

<div id="app">
  {{ message }}
</div>

就是在Vue.js中的插值法(Interpolation)，用'{{}}'來將View元素與Model數據雙向綁定的方式，而'message'是Vue實體的屬性，將顯示在''元素裡面。所以只要更改在''中message的字串，將網頁打開時呈現的字串也會有所不同。

Vue.js 常見指令

除了插值法，Vue.js還提供其他一系列指令，以v-開頭，用來將一些特殊指令綁定到DOM元素上。
這裡先介紹兩個:

1. 'v-bind': 用於將元素的屬性與Vue實體的數據綁定在一起。可以將Model數據的值動態地應用到HTML元素的屬性上，例如: src、href、class等。
   Ex. 將一個圖片的src屬性與Vue實體的imageUrl數據綁定在一起。

   <div id="app">
       <img v-bind:src="imageUrl" alt="cat">
     </div>
   

   <script>
       var app = new Vue({
         el: '#app',
         data: {
           imageUrl: 'https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=1200&quality=85&auto=format&fit=max&s=a52bbe202f57ac0f5ff7f47166906403'
         }
       });
     </script>
   

   網頁呈現:
   

2. 'v-model': 用來實作雙向數據綁定，通常用於表單或輸入資料等需要用戶輸入或選取的功能，例如: ''、''、''等。當用戶輸入時，Model數據也會自動更新。
   Ex. 將用戶輸入的內容與Vue數據綁定。

   <div id="app">
       <input v-model="message" type="text">
       <p>你輸入的內容是：{{ message }}</p>
     </div>
   

   <script>
       var app = new Vue({
         el: '#app',
         data: {
           message: ''
         }
       });
     </script>
   

   網頁呈現:
   

今天稍微嘗試了一些Vue.js的常用指令，明天將繼續嘗試剩下的指令。